<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #mainArea {
            width: 286px;
            float: left;
        }

        #mainArea select {
            margin: 0 0 3px;
            width: 100px;
        }

        #left {
            float: left;
            width: 120px;
        }

        #center {
            margin: 0 0px;
            float: left;
            margin-top: 80px;
        }

        #right {
            float: right;
            width: 120px;
        }

        input {
            width: 40px;
            padding: 1px;
            margin: 3px;
        }
    </style>
    <script type="text/javascript">
        function copyElement(src, dest) {
            var scrSelect = document.getElementById(src);
            var se10pt = scrSelect.selectedIndex != -1 ? scrSelect.options[scrSelect.selectedIndex] : null;
            if (se10pt == null) {
                return;
            }
            var newOption = document.createElement("option");
            newOption.value = se10pt.value;
            var opt_text = document.createTextNode(se10pt.text);
            newOption.appendChild(opt_text);
            var destSelect = document.getElementById(dest);
            destSelect.appendChild(newOption);
            scrSelect.removeChild(se10pt);
        }
    </script>
    <script type="text/javascript">
        window.onload = function () {
            var opt = document.getElementById("option");
            for (var i = 0; i < opt.length; i++) {
                opt[i].checked = false;
            }
        }
    </script>
</head>

<body>
    <div id="mainArea">
                    <div id="left">
                            待选名单<br>
                            <select id="employees" size="10" tableindex="1">
                                    <option value="1">王伟
                                       
                <option value="2">李佳
                                       
                <option value="3">赵俊杰
                                       
                <option value="4">李董
                                   
            </select>
                        </div>
                    <div id="center">
                            <input type="button" id="btnSelect" value=">>" tabindex="2"
                onclick="copyElement('employees','players')">
                        </div>
                    <div id="right">参加名单<br>
                            <select id="players" size="10" tabindex="3"></select>
                        </div>
                </div>
</body>

</html>